## CROSS-STYLE
### (MEANS CSS STYLE WORKING ON CROSS BROWSERS)
Make your website UI/UX running on the cross browser with three things: no hack CSS anymore, cross browser including Microsoft Edge even legacy browsers and the built-in packaged CSS handler modules even being able to build any your own module.

[![Join the chat at https://gitter.im/phatly27/cross-style](https://img.shields.io/badge/GITTER-join%20chat-green.svg)](https://gitter.im/phatly27/cross-style?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

<p align="center">
<img src="https://maxcdn.icons8.com/wp-content/uploads/2015/08/ms_edge2.png" alt="Cross Browsers including Microsoft Edge even legacy browsers"/>
<br/>
<img src="http://www.ilightbox.net/assets/img/cross-browser.png" alt="Cross Browsers including Microsoft Edge even legacy browsers"/>
<br/>
No need to hack or trick CSS - Cross Browsers - The built-in custom CSS properties/modules
</p>

### INTRODUCTION
In the modern web development era, the cross-browsers demand was put on the top of web developers as well as front-end web developers. This took them so much time in developing and maintaining the web projects. E.g: they usually were stuck with IE problems especially IE6-8. As usual, they use the CSS hacks or tricks to solve this matter. But, sometimes some hours or days even weeks to investigate and resolve it totally.

From this, the new idea was given the birth that we can use the custom CSS properties to extend your stylesheets working fine on cross browsers. Therefore, I have built the cross-style library to help everything to become easier and better than. For this library, it's to easy to use and configure by including the cross-style.js file into any web page once you expect to use it. Technically, at behind of stage, this one automatically reads all custom CSS properties to be defined in the stylesheets to be included in web page. Then, it shall involke the handler function to be implemented in each module to handle those CSS properties on cross browsers. In order to get more details about this library, please see the following features:

* The built-in custom CSS modules to handle cross browsers.
* Be able to develop your custom modules.
* Use this library as pure JavaScript or jQuery.
* Work on SASS/SCSS/LESS/Stylus.
* Contain a set of the reused functions and mixins of the advanced CSS languages.
* Many options to build this library with grunt.

### Getting Started
Checkout the latest source <a href="https://github.com/phatly27/cross-style/archive/master.zip">here</a> back to your local machine. Then, run with the local server to test. Or you can see the documentation.

### Installation
Temporarily you download the latest source and then include build/js/cross-style.js into your web page. I am making a plan for releasing the first version of this library.

### Examples
Take a look at the examples folder. Or view a tiny sample as follows:

*site.css*
```css
.cs-border-radius {
  background-color: indigo;
  padding: 32px;
  cs-border-radius: 10px;
}
```
*index.html*
```html
<html>
  <head>Test the cs-border-radius working on cross browsers</head>
  <link href="site.css" rel="stylesheet"/>
  <body>
    <div class="cs-border-radius">
      Congratulations! Your border-radius is working fine on cross browsers!
    </div>
    
    <script type="text/javascript" src="cross-style.min.js"></script>
  </body>
</html>
```


### Development
Please install the following required things before getting started to develop:

* Install NodeJS.
* Install the global grunt-cli using ```npm install -g grunt-cli```
* Install the dependency packages ```npm install```

In order to speed up the development, you can use any recommended Web IDE as follows:

* Atom Editor
* Sublime Text
* Brackets Editor.
* Visual Studio Code.

For the compilation usage, surely that you need to download entire source code and run with supported commands to build your own library:

* ```grunt``` (default): build the pure Javascript version with the style default being SCSS.
* ```grunt cs-sass```: build the pure Javascript version with the style default being SASS.
* ```grunt cs-less```: build the pure Javascript version with the style default being LESS.
* ```grunt cs-stylus```: build the pure Javascript version with the style default being STYLUS.
* ```grunt cs-scss-jquery```: build the pure jQuery version with the style default being SCSS.
* ```grunt cs-sass-jquery```: build the pure jQuery version with the style default being SASS.
* ```grunt cs-less-jquery```: build the pure jQuery version with the style default being LESS.
* ```grunt cs-stylus-jquery```: build the pure jQuery version with the style default being STYLUS.

Just take note that I used the Express server as local server. Once the build has completed, you can type ```http://localhost:3000``` on your browser to test.

### Documentation
Documentation

### ChangeLog
ChangeLog

### Contribution
Most of the time, if cross-style isn't working correctly for you or you discovered the bug/issue, please push a question or issue on the Github issues. I shall investigate and reply as soon as possible.

If you build a new custom CSS property or fix bug/issue, please fork this library and then add them to the repository. I shall review and merge any changes to main repository. I always welcome any contribution from anyone.

If you want to discuss something or just need help, <a href="https://gitter.im/phatly27/cross-style">here is our gitter.im room</a>.

### License
Copyright (c) 2015 PHAT LY

MIT (https://github.com/phatly27/cross-style/blob/master/LICENSE)
